<template>
  <q-tab-panel name="actionWaiting">
    <q-scroll-area
      v-if="Object.keys(actionWaiting).length !== 0"
      class="justify-center items-center full-height full-width"
    >
      <div class="no-wrap flex justify-center">
        <div v-for="(value, key) in actionWaiting" v-bind:key="key">
          <q-card
            class="q-ma-sm"
            style="height: calc(100vh - 100px)"
            :class="'bg-cyan-' + ((key - 1) % 10)"
          >
            <q-card-section
              class="text-h5 text-bold"
              :class="'text-' + (key % 10 > 6 ? 'white' : 'black')"
              >优先度{{ key }}
            </q-card-section>
            <q-separator />
            <q-card-section
              :class="'text-' + (key % 10 > 6 ? 'white' : 'black')"
              class="overflow-auto q-gutter-y-sm"
              style="height: calc(100vh - 166px)"
            >
              <q-card
                v-for="item in value"
                v-bind:key="item.device"
                style="min-width: 15rem"
                :class="'bg-blue-' + ((key - 1) % 10)"
              >
                <q-card-section class="text-h6">{{
                  typeName[item.type] || item.type
                }}</q-card-section>
                <q-list dense bordered padding class="rounded-borders">
                  <q-item>
                    <q-item-section>执行设备</q-item-section>
                    <q-item-section side>{{ item.device }}</q-item-section>
                  </q-item>
                  <q-item>
                    <q-item-section>动作分组</q-item-section>
                    <q-item-section side>{{
                      groupName[item.actionGroup] || item.actionGroup
                    }}</q-item-section>
                  </q-item>
                  <map-pose-info
                    v-if="item.type.includes('move')"
                    :pose-id="item.data"
                    center
                  />
                  <map-pose-info
                    v-if="['lift-in', 'lift-out'].includes(item.type)"
                    :pose-id="item.data"
                    label="目标工位"
                    center
                  />
                  <fork-cmd-info
                    v-else-if="['fork-in', 'fork-out'].includes(item.type)"
                    :shelf-id="item.data"
                    center
                  />
                </q-list>
              </q-card>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </q-scroll-area>
    <div v-else>
      <div
        class="flex justify-center content-center"
        style="height: calc(100vh - 9.2rem)"
      >
        <div
          class="text-h4 text-grey-7 text-center q-mt-lg"
          style="width: 30rem"
        >
          当前没有待执行的任务
        </div>
      </div>
    </div>
  </q-tab-panel>
</template>

<script>
import { onMounted, ref, inject, onUnmounted } from "vue";
import { useAPIStore } from "stores/api/index.js";
import { api } from "boot/axios.js";
import MapPoseInfo from "components/amr/MapPoseInfo.vue";
import ForkCmdInfo from "components/actionPlan/ForkCmdInfo.vue";

export default {
  name: "ActionWaiting",
  components: { ForkCmdInfo, MapPoseInfo },
  setup() {
    const actionWaiting = ref({});

    function getAction() {
      api.get(useAPIStore().centerUrl + "action/waiting").then((rs) => {
        actionWaiting.value = rs.data;
      });
    }

    onMounted(getAction);
    const timer = setInterval(getAction, 1000);
    onUnmounted(() => {
      clearInterval(timer);
    });

    const typeName = {};
    const groupName = {};
    inject("typeOptions").forEach((item) => {
      typeName[item.value] = item.label;
    });
    inject("groupOptions").forEach((item) => {
      groupName[item.value] = item.label;
    });

    return {
      actionWaiting,
      typeName,
      groupName,
    };
  },
};
</script>
